<template>
  <!-- 评论渲染
  1:定义api
  2:导入
  3:进入页面调用

 -->
  <div class="comment">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="load"
    >
      <div class="item" v-for="(item, index) in list" :key="index">
        <img class="avatar" :src="item.aut_photo" alt="" />
        <div class="middle">
          <div class="name">{{ item.aut_name }}</div>
          <div class="content">{{ item.content }}</div>
          <div class="time">
            <span>{{ item.pubdate | formatDate }}</span>
            <span class="rebtn" @click="reClick(item)"
              >回复({{ item.reply_count }})</span
            >
          </div>
        </div>
        <van-icon
          name="like-o"
          :class="{ red: item.is_liking }"
          @click="iconClick(item)"
        />
        <!-- 如果处于点赞状态点击：取消点赞
            如果处于没有点赞状态点击：添加点赞
         -->
      </div>
    </van-list>
    <!-- 到底部 -->
    <div class="to-bottom" @click="toBottom">到底部</div>

    <div class="resend">
      <van-field placeholder="请输入评论内容" v-model.trim="content">
        <template #button>
          <van-button size="small" type="info" @click="submit">发布</van-button>
        </template>
      </van-field>
    </div>
    <!-- 回复评论 -->
    <ReComment ref="reComment" v-if="showReComment" @reset="reset"></ReComment>
  </div>
</template>
<script>
import { comments, commentsPost, commentLikings } from '@/api/article'
import ReComment from './reComment.vue'
export default {
  components: { ReComment },
  data () {
    return {
      offset: null,
      list: [],
      loading: false,
      finished: false,
      content: '',
      showReComment: true
    }
  },
  created () {},
  methods: {
    async load () {
      const res = await comments({
        type: 'a',
        source: this.$route.query.id,
        offset: this.offset,
        limit: 1
      })
      // 数据累加
      this.list.push(...res.data.data.results)
      // 将v-model值改成false
      this.loading = false
      // 处理下一页请求参数
      this.offset = res.data.data.last_id
      // 判断是否加载完成
      if (res.data.data.last_id === res.data.data.end_id) {
        this.finished = true
      }

      // console.log('评论列表', res)
    },
    toBottom () {
      window.scrollTo(0, 999999)
    },
    // 发表评论
    async submit () {
      if (this.content === '') {
        this.$toast.fail('请输入内容后再发表')
        return
      }
      const res = await commentsPost({
        target: this.$route.query.id,
        content: this.content
      })
      this.$toast.success('发表评论成功')
      this.content = ''
      this.list.unshift(res.data.data.new_obj)
      // console.log('发表评论', res)
    },
    // 回复点击
    reClick (item) {
      // 打开弹框
      this.$refs.reComment.isShow = true
      // 将当前点击项的内容传递到弹框组件
      this.$refs.reComment.item = item
    },
    reset () {
      this.showReComment = false
      this.$nextTick(() => {
        this.showReComment = true
      })
    },
    // 点赞点击
    async iconClick (item) {
      await commentLikings(
        {
          target: item.com_id
        },
        item.is_liking
      )
      // 点赞成功修改状态
      item.is_liking = !item.is_liking
    }
  }
}
</script>
<style lang="less" scoped>
.comment {
  width: 100vw;
  padding: 15px;
  padding-bottom: 53px;
  box-sizing: border-box;
  .item,
  ::v-deep .item {
    display: flex;
    padding: 15px;
    .avatar {
      width: 45px;
      height: 45px;
      object-fit: cover;
      background-color: #000;
      border-radius: 50%;
      margin-right: 20px;
    }
    .middle {
      flex: 1;
      .name {
        color: #466bb6;
        font-size: 14px;
      }
      .content {
        padding: 6px 0;
        color: #000;
        word-break: break-all;
        word-wrap: break-word;
      }
      .time {
        color: #ccc;
        .rebtn {
          color: #000;
          padding-left: 8px;
        }
      }
    }
  }
  .resend {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
  }
  .red {
    color: red;
  }
}
.to-bottom {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #1989fa;
  color: #fff;
  line-height: 40px;
  position: fixed;
  right: 10px;
  bottom: 100px;
  text-align: center;
  font-size: 12px;
}
</style>
